<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Change Password</title>
</head>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
    function switch_home() {
        location.href = "/home.html";
    }

    function change_password() {
        if (user === null) {
            alert("Error: no user login!");
        } else {
            let old_password = document.getElementById('old-password').value;
            let new_password = document.getElementById('new-password').value;
            let confirm_password = document.getElementById('confirm').value;
            if (old_password === "") {
                alert("Old password can not be empty.");
            } else if (new_password === "" || old_password === "") {
                alert("New password can not be empty.");
            } else if (new_password !== confirm_password) {
                alert("New password and confirm password are not same.");
            } else {
                let json = {};
                json["user"] = user;
                json["old"] = old_password;
                json["new"] = new_password;
                json = JSON.stringify(json);
                $.ajax({
                    type: "POST",
                    url: "/change",
                    contentType: "application/json",
                    dataType: "json",
                    data: json,
                    success: function (data) {
                        data = JSON.stringify(data);
                        data = JSON.parse(data);
                        if (data["status"] === true) {
                            alert("Change password success. Please login again.");
                            location.href = "/index.html";
                        } else {
                            alert("Change password failed. The user not exist or the password not correct.");
                        }
                    },
                    error: function (data) {
                        alert("Server response failed.");
                    }
                })
            }
        }
    }
</script>
<style>
    html, body {
        height: 100%;
        margin: 0;
    }

    .notice-line {
        text-align: center;
        position: absolute;
        top: 175px;
        left: 0;
        right: 0;
    }

    .change-password-box {
        width: 350px;
        height: 225px;
        text-align: center;
        background: linear-gradient(blue, blue) left top,
        linear-gradient(blue, blue) left top,
        linear-gradient(blue, blue) right top,
        linear-gradient(blue, blue) right top,
        linear-gradient(blue, blue) left bottom,
        linear-gradient(blue, blue) left bottom,
        linear-gradient(blue, blue) right bottom,
        linear-gradient(blue, blue) right bottom;
        background-repeat: no-repeat;
        background-size: 1px 24px, 24px 1px;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
    }

    .title-split {
        float: left;
        width: 20px;
        height: 35px;
    }

    .between-split {
        float: left;
        width: 10px;
        height: 35px;
    }

    .title {
        float: left;
        width: 140px;
        height: 35px;
        text-align: left;
    }

    .input {
        float: left;
        width: 175px;
        height: 35px;
        text-align: left;
    }

    .button {
        float: left;
        width: 70px;
        height: 20px;
    }
</style>
<body>
<div class="notice-line">
    <h4 id="notice"></h4>
</div>
<div class="change-password-box">
    <header>
        <h2>Change password</h2>
    </header>
    <div class="change-password-form">
        <div class="title-split"></div>
        <div class="title">
            <label for="old-password">Old Password</label>
        </div>
        <div class="between-split"></div>
        <div class="input">
            <input type="password" id="old-password" name="old-password" placeholder="Old Password">
        </div>
        <div class="title-split"></div>
        <div class="title">
            <label for="new-password">New Password</label>
        </div>
        <div class="between-split"></div>
        <div class="input">
            <input type="password" id="new-password" name="new-password" placeholder="New Password">
        </div>
        <div class="title-split"></div>
        <div class="title">
            <label for="confirm">Confirm Password</label>
        </div>
        <div class="between-split"></div>
        <div class="input">
            <input type="password" id="confirm" name="confirm" placeholder="Confirm new password">
        </div>
        <div style="clear: left;width: 275px;height: 10px"></div>
        <div style="float: left;width: 75px;height: 25px;"></div>
        <button onclick="switch_home()" class="button">Return</button>
        <div style="float: left;width: 50px;height: 20px;"></div>
        <button onclick="change_password()" class="button">Submit</button>
    </div>
</div>
</body>
<script>
    let user = localStorage.getItem("user");
    if (user === null) {
        document.getElementById('notice').innerText = "Error: no user login.";
    } else {
        document.getElementById('notice').innerText = "Notice: Changing password of '" + user + "'";
    }
</script>
</html>